<!-- BI大屏展示 -->
<template>
	<div id="biChart" ref="testRef">
		<!-- <div id="test" style="width: 100vw; height: 100vh">
			<div id="testinner"  style="width: 100%; height: 100%"></div>
		</div> -->
		<a-carousel
			ref="carouselRef"
			:after-change="onChange"
			:pauseOnHover="false"
			:autoplay="true"
			:autoplaySpeed="5000"
			:infinite="false"
			:mouseWheel="true"
			@dblclick.stop="toggleFullScreen"
		>
			<dashBoard @dblclick.stop="toggleFullScreen"></dashBoard>
			<dayCallAnalysis @dblclick.stop="toggleFullScreen"></dayCallAnalysis>
			<PhoneStByMonthBar @dblclick.stop="toggleFullScreen"></PhoneStByMonthBar>
			<HistoryAnswerAnalysis @dblclick.stop="toggleFullScreen"></HistoryAnswerAnalysis>
			<AgentStatusStatis @dblclick.stop="toggleFullScreen"></AgentStatusStatis>
			<CallTrendAnalysis @dblclick.stop="toggleFullScreen"></CallTrendAnalysis>
			<TeamAgentStatis @dblclick.stop="toggleFullScreen"></TeamAgentStatis>
		</a-carousel>
	</div>
</template>
<script setup name="biChart">
	import { onMounted, onUnmounted } from 'vue'
	import { useRoute } from 'vue-router'
	import * as echarts from 'echarts'
	import dashBoard from '@/views/bi/biChart/dashBoard.vue'
	import dayCallAnalysis from '@/views/bi/biChart/dayCallAnalysis.vue'
	import PhoneStByMonthBar from '@/views/bi/biChart/phoneStatisByMonth.vue'
	import TeamAgentStatis from '@/views/bi/biChart/teamAgentStatis.vue'
	import HistoryAnswerAnalysis from '@/views/bi/biChart/historyAnswerAnalysis.vue'
	import CallTrendAnalysis from '@/views/bi/biChart/callTrendAnalysis.vue'
	import AgentStatusStatis from '@/views/bi/biChart/agentStatusStatis.vue'

	// ===========================================DATA======================================================
	let colorList = ['#2657D1', '#5794F7', '#1A3FBE', '#708CE1', '#2A5CEA', '#96BAE4']
	let carouselRef = ref()
	const route = useRoute()
	let testRef = ref()
	// let vantaEffect = ref(null)
	// ===========================================WATCH=====================================================

	// ===========================================LIFECYCLE HOOKS===========================================
	onMounted(() => {
		// vantaEffect.value = Net({
		// 	el: testRef.value,
		// 	THREE,
		// 	mouseControls: false,
		// 	touchControls: false,
		// 	gyroControls: false,
		// 	minHeight: 200.0,
		// 	minWidth: 200.0,
		// 	backgroundColor: 0x26282c,
		// 	color: 0x3f6cff,
		// 	scale: 1.0,
		// 	scaleMobile: 1.0,
		// 	points: 9.0,
		// 	maxDistance: 20.0,
		// 	spacing: 20.0
		// })

		document.addEventListener('fullscreenchange', () => {
			isFullscreen.value = !!document.fullscreenElement
		})
	})
	onUnmounted(() => {
		document.removeEventListener('fullscreenchange', () => {})
		// if (vantaEffect.value) {
		// 	vantaEffect.value.destroy()
		// }
		// // 设置父元素padding为0
		// const mainContent = document.querySelector('.main-content-wrapper')
		// if (mainContent) {
		// 	mainContent.style.padding = ''
		// }
	})
	// ===========================================METHODS==================================================
	const onChange = (value) => {
		// 如果是倒数第二项，下一个直接跳到第一项
		if (value === 6) {
			// 因为从0开始计数，所以倒数第二项是6
			setTimeout(() => {
				carouselRef.value?.goTo(0)
			}, 3000)
		}
	}

	//全屏切换
	const toggleFullScreen = async () => {
		const biChartElement = document.querySelector('#biChart')
		if (!document.fullscreenElement) {
			await biChartElement.requestFullscreen()
			isFullscreen.value = true
			// 确保全屏后继续自动播放
			carouselRef.value?.play()
		} else {
			await document.exitFullscreen()
			isFullscreen.value = false
			// 退出全屏后继续自动播放
			carouselRef.value?.play()
		}
	}
	// ===========================================REQUEST==================================================
</script>

<style lang="less" scoped>
	#biChart {
		width: 100%;
		height: 100%;
		// &::-webkit-scrollbar-thumb {
		// 	background: #3d76f6;
		// 	border-radius: 3px;
		// }
		// &::-webkit-scrollbar-track {
		// 	background: rgba(255, 255, 255, 0.1);
		// 	border-radius: 3px;
		// }
		&:fullscreen {
			width: 100vw;
			height: 100vh;
			:deep(.slick-slide > div) {
				height: 100vh;
				padding: 20px;
				background: #18233e;
			}
		}

		:deep(.slick-slide) {
			text-align: center;
			// background: #18233e;
			// > div {
			// 	height: calc(100vh - 110px);
			// }
			//图表共有样式
			#dashBoard,
			#dayCallAnalysis,
			#phoneStatisByMonth,
			#teamAgentStatis,
			#historyAnswerAnalysis,
			#callTrendAnalysis,
			#agentStatusStatis {
				display: flex !important;
				flex-direction: column;
				color: #fff;
				width: 100%;
				height: calc(100vh - 80px);
				// padding: 20px; //卡片样式
				.card {
					color: #fff;
					padding: 20px;
					border-radius: 5px;
					border: 2px solid transparent;
					border-image: linear-gradient(
							45deg,
							transparent,
							#2657d1,
							#5794f7,
							#1a3fbe,
							transparent,
							#708ce1,
							#2a5cea,
							#96bae4
						)
						1;
				}
			}
		}
	}
</style>
